<template>
  <div  class="q-radio-group">
    <a-radio
      v-for="(item,index) in options"
      :key="'qradio' + index"
      :value="item.value"
      :checked="aValue === item.value"
      :disabled="item.disabled" @click="changeValue(item.value)">
      {{item.label}}
    </a-radio>

  </div>
</template>

<script>
export default {
  name: 'QRadio',
  props: {
    value: null,
    options: {
      type: Array,
      required: true,
      default: function() {
        return []
      }
    },
    // 允许取消
    allowCancel: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  data() {
    return {
      aValue: this.value
    }
  },
  methods: {
    changeValue (val) {
      this.aValue = this.allowCancel ? (this.aValue === val ? '' : val) : val
      this.$emit('update:value', this.aValue)
    }
  }
};
</script>

<style lang="less" scoped>
  .q-radio-group{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: 'tnum';
    display: inline-block;
    font-size: 0;
  }
</style>
